<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@page isELIgnored="false" %>
<html>
  <head>
    <%@include file="/styles/common/cssStyle.jsp" %>
    <title>添加商品</title>
	</head>
  
  <body>
  <article class="page-container">
  <!-- enctype="multipart/form-data" -->
	<form action="<%=basePath%>admin/goods/insertGoods" class="form form-horizontal" id="Form" method="post" enctype="multipart/form-data" >
		<div class="row cl">
			<label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>商品名称：</label>
			<div class="formControls col-xs-8 col-sm-9">
				<input type="text" class="input-text" name="goodsName" size="50" datatype="*" nullmsg="请输入商品名称" />
			</div>
		</div>
		<div class="row cl">
			<label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>商品价格：</label>
			<div class="formControls col-xs-8 col-sm-9">
				<input type="text" class="input-text" name="goodsPrice" size="50" datatype="integer" errormsg="格式不正确" nullmsg="请输入商品价格" />
			</div>
		</div>
		<div class="row cl">
			<label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>商品图片：</label>
			<div class="form-group">
				<input type="file" id="xdaTanFileImg" class="file" name="file" onchange="xmTanUploadImg(this)" accept="image/*" />
				<div class="row clearfix">
					<div class="col-md-12 column">
						<img id="xmTanImg"  class="img-circle" style="width: 200px; height: 200px;" />
					</div>
				</div>
				<div id="xmTanDiv"></div>
			</div>
		</div>
		<div class="row cl">
			<label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>商品简介：</label>
			<div class="formControls col-xs-8 col-sm-9">
				<input type="text" class="input-text" name="goodsContent" size="50" datatype="*" nullmsg="请输入商品简介" />
			</div>
		</div>
		<div class="row cl">
			<label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>出厂日期：</label>
			<div class="formControls col-xs-8 col-sm-9">
				<input type="text" class="input-text" name="goodsDate" size="50" datatype="*" nullmsg="请输入出厂日期" onclick="WdatePicker()"/>
			</div>
		</div>
		<div class="row cl">
			<label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>商品库存：</label>
			<div class="formControls col-xs-8 col-sm-9">
				<input type="text" class="input-text" name="goodsNum" size="50" datatype="integer" errormsg="格式不正确" nullmsg="请输入库存数量" />
			</div>
		</div>
		<div class="row cl">
			<label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>是否商城展示：</label>
			<div class="formControls col-xs-8 col-sm-9 skin-minimal">
				<div class="radio-box">
					<input name="goodsRec" type="radio" id="sex-1" value="1" >
					<label for="sex-1">是</label>
				</div>
				<div class="radio-box">
					<input name="goodsRec" type="radio" id="sex-2" value="0" >
					<label for="sex-2">否</label>
				</div>
			</div>
		</div>
		<div class="row cl">
			<label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>商品类别：</label>
			<div class="formControls col-xs-8 col-sm-9">
				<select name="goodsTypeId" class="select" >
					<option value="">请选择</option>
					<c:forEach items="${goodsTypeList }" var="goodsTypeP">
						<c:if test="${goodsTypeP.pId ==0 }" >
							<option  disabled="disabled" value="${goodsTypeP.goodsTypeId }">${goodsTypeP.goodsTypeName }</option>
							<c:forEach items="${goodsTypeList }" var="goodsTypeS">
								<c:if test="${goodsTypeS.pId == goodsTypeP.goodsTypeId }">
									<option value="${goodsTypeS.goodsTypeId }">&nbsp;&nbsp;&nbsp;&nbsp;├${goodsTypeS.goodsTypeName }</option>
								</c:if>
							</c:forEach>
						</c:if>
					</c:forEach>
				</select>
			</div>
		</div>
		<div class="row cl">
			<label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>首页位置：</label>
			<div class="formControls col-xs-8 col-sm-9 skin-minimal">
				<div class="radio-box">
					<input name="pageType" type="radio" id="sex-1" value="1" >
					<label for="sex-1">热销产品</label>
				</div>
				<div class="radio-box">
					<input name="pageType" type="radio" id="sex-2" value="2" >
					<label for="sex-2">商家推荐</label>
				</div>
			</div>
		</div>
		<div class="row cl">
			<label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>商品顺序：</label>
			<div class="formControls col-xs-8 col-sm-9">
				<input type="text" class="input-text" name="goodsOrder" size="50" datatype="*" nullmsg="请输入商品顺序" />
			</div>
		</div>
		 <div class="row cl">
			<div class="col-xs-8 col-sm-9 col-xs-offset-4 col-sm-offset-3">
				<input class="btn btn-primary radius" type="submit" value="&nbsp;&nbsp;提交&nbsp;&nbsp;" id="insertBut" />
				<input class="btn btn-success radius" type="button" value="&nbsp;&nbsp;返回&nbsp;&nbsp;" onclick="closeLayer()" />
			</div>
		</div>
	</form>
  </article>
  <%@include file="/styles/common/jsStyle.jsp" %>
  	<script type="text/javascript">
  	/* 表单校验 */
	$(function(){
		/*单选框样式*/
		$('.skin-minimal input').iCheck({
			checkboxClass: 'icheckbox-blue',
			radioClass: 'iradio-blue',
			increaseArea: '20%'
		});
		
		/* 截取上传文件后缀，只能是图片形式 */
		$("#Form").submit(function(){
			var filePath = $("input[name='file']").val();
			var extStart = filePath.lastIndexOf(".");
			var ext = filePath.substring(extStart,filePath.length).toUpperCase();
			if(ext!=".png" && ext!=".PNG" && ext!=".jpg" && ext!=".JPG"){
				layer.alert("必须是图片格式！");
				return false;
			}
		})
		
		$("#Form").Validform({
			tiptype:3, 
			tipSweep:true,
			datatype:{
				"integer" :  /^\+?(0|[1-9][0-9]*)$/,
			}
		});
	});
	
	// 关闭窗口
	function closeLayer(){
		var index = parent.layer.getFrameIndex(window.name); //获取窗口索引
        parent.layer.close(index);
        return true;
	}
	
	//选择图片，马上预览
	function xmTanUploadImg(obj) {
		var file = obj.files[0];

		console.log(obj);
		console.log(file);
		console.log("file.size = " + file.size); //file.size 单位为byte

		var reader = new FileReader();
		//读取文件过程方法
				reader.onloadstart = function(e) {
					console.log("开始读取....");
				}
				
				reader.onprogress = function(e) {
					console.log("正在读取中....");
				}
				reader.onabort = function(e) {
					console.log("中断读取....");
				}
				reader.onerror = function(e) {
					console.log("读取异常....");
				}
		reader.onload = function(e) {
			console.log("成功读取....");

			var img = document.getElementById("xmTanImg");
			img.src = e.target.result;
			//或者 img.src = this.result;  //e.target == this
		}

		reader.readAsDataURL(file)
	}
	
  	</script>
  </body>
</html>
